//@ts-nocheck
import React, { useEffect, useState } from 'react'
import './index.less'

function hexToRgb(hex) {
  return (
    parseInt('0x' + hex.slice(1, 3)) +
    ',' +
    parseInt('0x' + hex.slice(3, 5)) +
    ',' +
    parseInt('0x' + hex.slice(5, 7))
  )
}

const LegendItem = ({ color, title, isGray, onClick }) => {
  return (
    <div className="legend-item">
      <span
        style={{ backgroundColor: isGray ? '#ccc' : color }}
        className="block"
        onClick={() => onClick(color)}
      />
      <span className="title">{title}</span>
    </div>
  )
}

const Point = ({ x, y, title, color, size }) => {
  // console.log('size', size)
  return (
    // eslint-disable-next-line react/jsx-no-useless-fragment
    <>
      {size > 8 ? (
        <div className="point-item" style={{ left: x + '%', top: y + '%' }}>
          <span
            style={{
              backgroundColor: `rgba(${color}, 0.2)`,
              width: `${size + 4}px`,
              height: `${size + 4}px`
            }}
            className="block"
          >
            <span
              className="inner-block"
              style={{ backgroundColor: `rgba(${color}, 0.8)`, width: size, height: size }}
            />
          </span>
          <span className="text">{title}</span>
        </div>
      ) : (
        <div className="point-item" style={{ left: x + '%', top: y + '%' }}>
          <span
            className="inner-block"
            style={{ backgroundColor: `rgba(${color}, 0.8)`, width: size, height: size }}
          />
          <span className="text">{title}</span>
        </div>
      )}
    </>
  )
}

const RelationalDistributionChart = ({ xMax, yMax, legend, points, width, title }) => {
  const [showPointsList, setShowPointsList] = useState<any>([])
  const [legendList, setLegendList] = useState([])

  useEffect(() => {
    setLegendList(
      legend?.map((i) => {
        return {
          ...i,
          isGray: false
        }
      })
    )
  }, [legend])

  useEffect(() => {
    let maxValue = 0
    points?.forEach((dataItem) => {
      if (dataItem.value > maxValue) maxValue = dataItem.value
    })

    setShowPointsList(
      points?.map((point) => {
        return {
          ...point,
          x: ((point.x + xMax) / (2 * xMax)) * 100,
          y: ((point.y + yMax) / (2 * yMax)) * 100,
          showColor: hexToRgb(point.color),
          title: point.title,
          showPoint: true,
          size: (point.value * 32) / maxValue > 1 ? (point.value * 32) / maxValue : 1
        }
      })
    )
  }, [points])

  const onClick = (color) => {
    const list = [].concat(showPointsList)
    const _legendList = [].concat(legend)
    list.forEach((dataItem) => {
      if (dataItem.color === color) {
        dataItem.showPoint = !dataItem.showPoint
      }
    })

    _legendList.forEach((item) => {
      if (item.color === color) {
        item.isGray = !item.isGray
      }
    })

    setShowPointsList(list)
    setLegendList(_legendList)
  }

  return (
    <div className="relational-distribution-chart">
      <div className="relational-distribution">
        <section>
          <div className="bg-warpper">
            <div className="bg bg-2" style={{ height: `${width * 0.31}px` }} />
            <div className="bg bg-3" style={{ height: `${width * 0.56}px` }} />
            <div className="bg bg-4" style={{ height: `${width * 0.81}px` }} />
            <div className="bg bg-5" style={{ height: `${width}px` }} />
          </div>
          <div className="axis">
            <div className="axis-item" style={{ marginLeft: 32, marginRight: 22 }}>
              <span>弱</span>
              <span className="line" />
              <span className="dependency">相关性</span>
              <span className="line" />
              <span>强</span>
            </div>
            <div className="cicle" style={{ height: `${width * 0.1}px` }}>
              {title}
            </div>
            <div className="axis-item" style={{ marginRight: 32, marginLeft: 22 }}>
              <span>强</span>
              <span className="line" />
              <span className="dependency">相关性</span>
              <span className="line" />
              <span>弱</span>
            </div>
          </div>
          {showPointsList?.map((point, index) => {
            return (
              <div key={index}>
                {point.showPoint && (
                  <Point
                    key={index}
                    x={point.x}
                    y={point.y}
                    title={point.title}
                    color={point.showColor}
                    size={point.size}
                  />
                )}
              </div>
            )
          })}
        </section>
        <div className="explain">
          <div className="explain-left">
            <span>相关性</span>
            <div className="explain-list-block">
              <span>弱</span>
              <span className="block" style={{ backgroundColor: '#F2F7FF' }} />
              <span className="block" style={{ backgroundColor: '#ECF3FF' }} />
              <span className="block" style={{ backgroundColor: '#DEEBFE' }} />
              <span>强</span>
            </div>
          </div>
          <div className="legend">
            {legendList?.map((item, index) => {
              return (
                <LegendItem
                  key={index}
                  color={item.color}
                  isGray={item.isGray}
                  title={item.title}
                  onClick={onClick}
                />
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default RelationalDistributionChart
